<template>
    <main>
        <header>
            <div>
                <img src="../assets/images/al/mst_49dca4608f3f3a6ac003c3740f7e09f6_750x230_90.jpg" alt="">
            </div>
            <div style="margin-bottom:2.5vw">
                <img src="../assets/images/al/1/mst_b9f625f647bdb8a58853475aa2618ff9_750x548_90.jpg" alt="">
                <ul class="com1">
                    <li v-for="(item,index) in com1">
                        <img :src="item.src" alt="">
                        <div><img :src="item.ico" alt="" style="width:14vw"></div>
                    </li>
                </ul>
            </div>
            <div>
                <img src="../assets/images/al/2/mst_685f7205771a176488b966e0974fc15d_750x224_90.jpg" alt="">
                <ul class="com2">
                    <li v-for="(item,index) in com2">
                        <div><img :src="item.src" alt=""></div>
                        <div><span>{{item.name}}</span></div>
                    </li>
                </ul>
            </div>
        </header>
        <component :is='vip'></component>
    </main>
</template>
<script>
    import com_list from './al_list';
    export default {
        components:{
            "com_list":com_list
        },
        data(){
            return{
                vip:"com_list",
                com1:[],
                com2:[]
            }
        },
        mounted(){
            this.$http.get('./data/al.json',{
                
            })
            .then((response)=> {
                console.log(response);
                this.com1=response.data.com1
                this.com2=response.data.com2
            })
            .catch(function (error) {
                console.log(error);
            })
            .then(function () {
                // always executed
            }); 
        }
    }
</script>
<style scoped>
    main{
        background-color: #f2f2f2;
    }
    header>div{
        padding:0;
        position: relative;
    }
    header>div>img{
        float: left;
        width: 100vw;
    }
    header>div:after{
        content: "";
        display: table;
        clear: both;
    }
    .com1{
        position: absolute;
        padding: 2vw 0 0 2vw;
    }
    .com1>li{
        float: left;
        margin: 0 2vw 2vw 0;
        height: calc(92vw/3.35*1*259/204);
        overflow: hidden;
        border-radius: 2vw;
        position: relative;
    }
    .com1>li>img{
        width: 100%;
        height: 100%;
    }
    .com1>li:nth-of-type(1){
        width: calc(92vw/3.35*2.35 + 2vw);
    }
    .com1>li:nth-of-type(2){
        width: calc(92vw/3.35*1);
    }
    .com1>li:nth-of-type(3){
        width: calc(92vw/3.35*1);
    }
    .com1>li:nth-of-type(4){
        width: calc(92vw/3.35*1.35);
    }
    .com1>li:nth-of-type(5){
        width: calc(92vw/3.35*1);
    }
    .com1>li>div{
        position: absolute;
        text-align: center;
        padding: 1vw;
    }
    .com1>li:first-child>div{
        background-image: url('../assets/images/al/1/mst_6d7ac1eb0230495f2ad5ec92f4900327_118x68_90.png') ;
        background-size: 16vw, 9vw;
        top:13vw;
        left: 5vw;
        width: 16vw;
        height: 9vw;
    }
    .com1>li:not(:first-child)>div{
        background-image: url('../assets/images/al/1/mst_d65ac196f3d1ed2d76c8167af9268d61_204x68_90.png');
        background-size:100% 100%;
        width: 100%;
        bottom: 0;
    }
    .com2{
        position: absolute;
        padding: 1vw;
        right: 2vw;
    }
    .com2>li{
        float: left;
        width: 22vw;
        text-align: center;
    }
    .com2>li>div>img{
        width: 100%;
        border-radius: 2vw;
    }
    .com2>li>div:nth-of-type(1){
        padding: 1vw;
        width: 22vw;
        height: 22vw;
    }
    .com2>li>div:nth-of-type(2){
        padding: 1vw 0;
        line-height: 2.3vw;
    }
    .com2>li>div>span{
       color:#f2cdaa;
       font-size: 2.3vw;
    }
</style>